<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Gelei's Blog</title>

        <!-- CSS -->
        <link href="{{ URL::asset('css/assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
        <link href="{{ URL::asset('css/assets/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
        <link href="{{ URL::asset('css/assets/css/form-elements.css') }}" rel="stylesheet">
        <link href="{{ URL::asset('css/assets/css/style.css') }}" rel="stylesheet">
        <link href="{{ URL::asset('layer-v2.4/skin/layer.css') }}" rel="stylesheet">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicon and touch icons -->
        <link href="{{ URL::asset('css/assets/ico/favicon.png') }}" rel="stylesheet">
        <link href="{{ URL::asset('css/assets/ico/apple-touch-icon-144-precomposed.png') }}" rel="stylesheet">
        <link href="{{ URL::asset('css/assets/ico/apple-touch-icon-114-precomposed.png') }}" rel="stylesheet">
        <link href="{{ URL::asset('css/assets/ico/apple-touch-icon-72-precomposed.png') }}" rel="stylesheet">
        <link href="{{ URL::asset('css/assets/ico/apple-touch-icon-57-precomposed.png') }}" rel="stylesheet">
    </head>
    

    <body>

        <!-- Top content -->
        <div class="top-content">
            
            <div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong><a href="/" target="_blank" >Gelei's Blog</a></strong> Register Form</h1>
                            <div class="description">
                                <p>
                                     <a href=""><strong>用户注册</strong></a>
                                </p>
                                <!-- <h2>编程狂</h2> -->
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                            <div class="form-top">
                                <div class="form-top-left">
                                    <h3>Register to Gelei's Blog</h3>
                                    <p>Enter your username and password to Register on:</p>
                                </div>
                                <div class="form-top-right">
                                    <i class="fa fa-key"></i>
                                </div>
                            </div>
                            <div class="form-bottom">
                                <form role="form" method="post" class="login-form">
                                <div class="form-group">
                                        <label class="sr-only" for="form-username">邮箱</label>
                                        <input type="text" name="email" placeholder="Email..." class="form-email form-control" id="form-email">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-username">用户名</label>
                                        <input type="text" name="username" placeholder="Username..." class="form-username form-control" id="form-username">
                                        {{ csrf_field() }}
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-password">密码</label>
                                        <input type="password" name="password" placeholder="NewPassword..." class="form-password form-control" id="form-password">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="form-password">验证码</label>
                                        <input type="text" style="width: 60%;float: left;" name="verify" placeholder="验证码..." class="form-verify form-control" id="form-verify">
                                        <span class="checkTip Validform_checktip Validform_wrong" style="width:25%;margin-left: 9px;color: red;display: none;"><img src="upload/image/error.png"></span>
                                        <a href="javascript:void(0);"><img id="verify" style="float: right;width: 25%;height: 50px;" src="/verify"></a>
                                    </div>
                                    <button type="submit" style="margin-top: 10px;" class="btn">Sign in</button>
                                    <div class="register" style="float:right;margin-top: 2px;"><a href="/login">立即登录</a></div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 social-login">
                            <div class="social-login-buttons">
                                <a class="btn btn-link-1 btn-link-1-facebook" href="#">
                                    <i class="fa fa-qq"></i> QQ
                                </a>
                                <a class="btn btn-link-1 btn-link-1-twitter" href="#">
                                    <i class="fa fa-weixin"></i> 微信
                                </a>
                                <a class="btn btn-link-1 btn-link-1-google-plus" href="#">
                                    <i class="fa fa-weibo"></i> 微博
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <!-- Javascript -->
         <script type="text/javascript" src="{{ URL::asset('css/assets/js/jquery-1.11.1.min.js') }}"></script>
         <script type="text/javascript" src="{{ URL::asset('css/assets/bootstrap/js/bootstrap.min.js') }}"></script>
         <script type="text/javascript" src="{{ URL::asset('css/assets/js/jquery.backstretch.min.js') }}"></script>
         <script type="text/javascript" src="{{ URL::asset('css/assets/js/scripts.js') }}"></script>
         <script type="text/javascript" src="{{ URL::asset('layer-v2.4/layer.js') }}"></script>
        <!--[if lt IE 10]>
            <script type="text/javascript" src="{{ URL::asset('css/assets/js/placeholder.js') }}"></script>
        <![endif]-->

    </body>

    <script type="text/javascript">
        $(document).on('click','.btn',function(){
            if($('input[type="text"]').val() !='' && $('input[type="password"]').val() !='' && $('[name=repassword]').val() !=''){
                    var username = $('[name=username]').val();
                    var password = $('[name=password]').val();
                    var email = $('[name=email]').val();
                    var verify = $('[name=verify]').val();
                    var _token = $('[name=_token]').val();
                    $.ajax({
                        url:'/quick_register',
                        type:'post',
                        dataType:'json',
                        data:{username:username,password:password,_token:_token,email:email,verify:verify},
                        success:function(re){
                            if (re.status == 1) {
                                layer.msg(re.msg);
                            }else{
                                layer.msg(re.msg);
                            }
                        }
                    })
            }
            return false;
        })
        $("#verify").click(function () {
                $(this).prop("src","/verify");
        });
    </script>

</html>